<template>
  <div class='financebox'>
    <div class="title">财务数据</div>
    <div id="finance"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      
    }
  },
  methods: {

  },
  mounted() {
    function rgb(){
      let color='#';
      for(let i=0;i<6;i++){
        color=color.concat(parseInt(Math.random()*16).toString(16));
      }
      return color
    }
    // 基于准备好的dom，初始化echarts实例
    let myFinance = echarts.init(document.getElementById('finance'));
    let date=[];

    for(let i=1;i<11;i++){
      date.push('03-'+(i))
    }
    // 绘制图表
    myFinance.setOption({
      title:{
        text:'本月订单总数:320本月订单总额：￥630000',
        textStyle:{
          fontSize:'12px',
          fontWeight:'bold',
          color:'#333'
        },
        left:'180px',
        top:'8px'
      },
      tooltip: {},
      xAxis: {
        name: '日期 ',
        nameLocation:'end',
        nameTextStyle:{
          fontWeight:'bold',
        },
        data: date
      },
      yAxis: {},
      series: [
        {
          barWidth:"10px", 
          name: '(元)',
          type: 'bar',
          data: [{
            value:24000,
            itemStyle:{
              color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: rgb() // 0% 处的颜色
                }, {
                    offset: 1, color: 'transparent' // 100% 处的颜色
                }],
              }
            }
          }, 
          {
            value:14000,
            itemStyle:{
              color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: rgb() // 0% 处的颜色
                }, {
                    offset: 1, color: 'transparent' // 100% 处的颜色
                }],
              }
            }
          },
          {
            value:23000,
            itemStyle:{
              color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: rgb() // 0% 处的颜色
                }, {
                    offset: 1, color: 'transparent' // 100% 处的颜色
                }],
              }
            }
          },
          {
            value:28000,
            itemStyle:{
              color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: rgb() // 0% 处的颜色
                }, {
                    offset: 1, color: 'transparent' // 100% 处的颜色
                }],
              }
            }
          },
          {
            value:15000,
            itemStyle:{
              color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: rgb() // 0% 处的颜色
                }, {
                    offset: 1, color: 'transparent' // 100% 处的颜色
                }],
              }
            }
            },
          {
            value:20000,
            itemStyle:{
              color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: rgb() // 0% 处的颜色
                }, {
                    offset: 1, color: 'transparent' // 100% 处的颜色
                }],
              }
            }
          },
          {
            value:15000,
            itemStyle:{
              color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: rgb() // 0% 处的颜色
                }, {
                    offset: 1, color: 'transparent' // 100% 处的颜色
                }],
              }
            }
          },
          {
            value:29000,
            itemStyle:{
              color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: rgb() // 0% 处的颜色
                }, {
                    offset: 1, color: 'transparent' // 100% 处的颜色
                }],
              }
            }
          },
          {
            value:6000,
            itemStyle:{
              color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: rgb() // 0% 处的颜色
                }, {
                    offset: 1, color: 'transparent' // 100% 处的颜色
                }],
              }
            }
          },
          {
            value:12000,
            itemStyle:{
              color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: rgb() // 0% 处的颜色
                }, {
                    offset: 1, color: 'transparent' // 100% 处的颜色
                }],
              }
            }
          }
          ]
        }
      ]
    });
  },
}
</script>
<style lang='less' scoped>
  #finance{
    width: 600px;
    height: 380px;
    position: relative;
    top: 20px;
  }
  .financebox{
    width: 600px;
    height: 400px;
    background: #fff;
    position: relative;
  }
  .title{
    padding: 24px 0 32px 24px;
    font-size: 16px;
    color: #333;
    font-weight: bold;
    position: absolute;
    top: 0;
    z-index: 1;
    &::before{
      content: '';
      display: inline-block;
      background-color:#3c87fe;
      width: 4px;
      height: 21px;
      margin-right: 20px;
      vertical-align:sub;
    }
    &:hover,&:focus{
      color: #438afe;
    }
  }
</style>